<template>
    <!-- 专辑页面 -->
    <div id="album_container">
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <banner>
            <img class="banner-component-img" slot="banner-image"
                 v-lazy="info.albumDetail.albumCover + '?cmd=imageprocess/processtype/2/quality/100/width/514'"/>
            <div class="banner-component-pay" slot="banner-inst" v-if="info.albumDetail.isCharge==1">
                本专辑需付费观看
                <span class="pay_btn" @click="openapp();">购买此专辑</span>
                <div style="clear: both;height:0;"></div>
            </div>
        </banner>
        <div class="banner-component-channel-info-ablam" slot="banner-inst">
            <div class="banner-component-channel-title-ablam">{{info.albumDetail.albumName}}</div>
            <div class="banner-component-channel-content-ablam" v-html="info.albumDetail.albumDesc"></div>
            <!--<author5 :channelInfo="channelInfo"></author5>-->
            <channel :info="channelInfo"></channel>
        </div>

        <div id="wrapper" style="padding-top:0;">
            <div class="album-nav"><span class="album-nav-gx">更新:{{toCommonTime(info.albumDetail.updateDate)}}</span>

                <div class="album-nav-icon" v-if="ablumecs" @click="sortchange()"><img src="../../assets/images/positive.png"/>正序</div>
                <div class="album-nav-icon" v-if="!ablumecs" @click="sortchange()"><img src="../../assets/images/reversed.png"/>倒序</div>
            </div>
            <div style="clear:both;display: none;"></div>
            <ul class="album-list" v-if="info.albumDetail.albumType==1">
                <li class="album-item" v-for="(item,index) in info.rows">
                    <listvideosmall :info="item" :isBig="false"></listvideosmall>
                </li>
                <div class="clearBoth"></div>
            </ul>
            <ul class="album-list-audio" v-if="info.albumDetail.albumType==2">
                <li class="album-item-audio" v-for="(item,index) in info.rows">
                    <Listaudiosmall :info="item"></Listaudiosmall>
                </li>
                <div class="clearBoth"></div>
            </ul>
            <div class="page-container" @click="getAlbum()">{{loadMore}}</div>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"

    export default {
        components: {
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Banner: function (resolve) {
                require(["../../components/banner.vue"], resolve);
            },
            Listvideosmall: function (resolve) {
                require(["../../components/list_video_small2.vue"], resolve);
            },
            Listaudiosmall: function (resolve) {
                require(["../../components/list_audio_small.vue"], resolve);
            },
            /*Author5: function (resolve) {
                require(["../../components/author5.vue"], resolve)
            },*/
            Channel: function (resolve) {
                require(["../../components/channel.vue"], resolve);
            },
        },
        data: function () {
            return {
                jhb_info:{
                    contentId:this.$route.params.albumid,
                    contentType:4
                },
                info: {
                    albumDetail: {},
                    totalCount: 0,
                    rows: []
                },
                layerDisplay: {
                    type: Boolean,
                    default: true
                },

                page: 1,
                pageSize: 10,
                loadMore: "加载更多",
                canLoadMore: true,

                callApp: {
                    contentType: 4,
                    // 老路由地址
                    contentParam: location.protocol+"//share.96189.com/client/app/index.html?t=" + new Date().getTime() + "#/albumList/" + this.$route.params.albumid
                },
                channelInfo: {},
                ablumecs:true
            };
        },
        methods: {
            openapp:function(){

              /*  let r=confirm("购买专辑将打开【扬帆】app，确认打开吗?");
                if(r==false){
                    return false;
                }else if(r==true){
                    openDownPage(this.callApp.contentType, this.callApp.contentParam);
                }*/
                let that=this;

                that.$dialog.confirm('购买专辑将打开【扬帆】app，确认打开吗?',{
                    okText: '确定',  // 本地化确认按钮文字提示内容
                    cancelText: '取消',  //本地化关闭按钮文字提示内容
                })
                    .then(function () {
                        // 点击确定执行
                        openDownPage(that.callApp.contentType, that.callApp.contentParam);
                    })
                    .catch(function () {
                        // 点击取消执行
                    });

            },
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            sortchange :function(){
                this.ablumecs=!this.ablumecs;
                this.page=1;
                this.getnewAlbum();
            },
            getnewAlbum:function(){
                let sort=0;
                if(this.ablumecs){
                    sort=0;
                }else{
                    sort=1;
                }
                let that = this;
                // 获取专辑信息
                this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getAlbumContentList",
                    qs.stringify({
                        params: JSON.stringify(
                            {
                                albumId: this.$route.params.albumid,
                                detailTag: 1,
                                idx: (this.page - 1) * this.pageSize,
                                size: this.pageSize,
                                sortOrder:sort,
                            }
                        ),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
                ).then((response) => {
                    // 获取数据
                    let responseData = response.data.data;
                    if (responseData.rows.length > 0) {
                        // 做一些必要的数据格式转换

                        for (let key in responseData.rows) {
                            responseData.rows[key] = {
                                content: responseData.rows[key]
                            };
                            responseData.rows[key].content.channelId = responseData.albumDetail.channelId;
                            responseData.rows[key].contentId = responseData.rows[key].content.contentId;
                        }


                        that.info.totalCount = responseData.totalCount;
                        if (that.canLoadMore)
                            that.info.rows = [];
                        that.info.rows = responseData.rows;
                        if (that.info.rows.length >= responseData.totalCount) {
                            that.loadMore = "已经加载全部";
                            that.canLoadMore = false;
                        } else {
                            that.page++;
                        }
                    } else {
                        that.loadMore = "没有数据";
                    }
                })
            },
            getAlbum: function (init) {
                let sort=0;
                if(this.ablumecs){
                    sort=0;
                }else{
                    sort=1;
                }
                let that = this;
                if (init == "" || init == null || typeof init == "undefined")
                    init = true;

                // 获取专辑信息
                this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getAlbumContentList",
                        qs.stringify({
                            params: JSON.stringify(
                                    {
                                        albumId: this.$route.params.albumid,
                                        detailTag: 1,
                                        idx: (this.page - 1) * this.pageSize,
                                        size: this.pageSize,
                                        sortOrder:sort,
                                    }
                            ),
                            apiVersion: process.env.VUE_APP_SERVER_VER
                        })
                ).then((response) => {
                    //404
                    if (response.data.state == 2017){
                        window.location.href = "//"+window.location.host+"/yfs/Dnf";
                        return false;
                    }

                    // 获取频道信息
                    this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                        qs.stringify({
                            params: JSON.stringify({
                                channelId: response.data.data.albumDetail.channelId
                            }),
                            apiVersion: process.env.VUE_APP_SERVER_VER
                        })
                    ).then((response) => {

                        that.channelInfo = response.data.data;
                        // console.log("-----------------------");
                        // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                        // console.log("-----------------------");
                    });


                    // 获取数据
                    let responseData = response.data.data;
                    // 修改页面信息
                    let meta = {
                        title: responseData.albumDetail.shareTitle,
                        content: responseData.albumDetail.shareContent,
                        name: responseData.albumDetail.albumName
                    };
                    // console.log(meta);
                    this.createMetaInfo(meta);
                    this.freshTitles(responseData.albumDetail.shareTitle);

                    this.info.albumDetail = responseData.albumDetail;
                    var reg = new RegExp( "http://admin" , "g" )
                    this.info.albumDetail.albumDesc=(responseData.albumDetail.albumDesc).replace(reg,"//admin");
                    if (responseData.rows.length > 0) {
                        // 做一些必要的数据格式转换
                        for (let key in responseData.rows) {
                            responseData.rows[key] = {
                                content: responseData.rows[key]
                            };
                            responseData.rows[key].content.channelId = responseData.albumDetail.channelId;
                            responseData.rows[key].contentId = responseData.rows[key].content.contentId;
                        }


                        this.info.totalCount = responseData.totalCount;
                        if (this.canLoadMore)
                            this.info.rows = this.info.rows.concat(responseData.rows);
                        if (this.info.rows.length >= responseData.totalCount) {
                            this.loadMore = "已经加载全部";
                            this.canLoadMore = false;
                        } else {
                            this.page++;
                        }
                    } else {
                        this.loadMore = "没有数据";
                    }
//                    console.log("--------------------------");
//                    console.log(JSON.stringify(this.info, undefined, 2));
//                    console.log("--------------------------");

                    function doAccessAlbumSpecial() {
                        let actionType = "accessalbumspecial";
                        let behaviorData = {
                            "uid": "",
                            "username": "",
                            "contentid": that.$route.params.albumid,
                            "imei": "",
                            "openid": "",
                            "ip": "",
                            "type": "album_1",
                            "contenttype": "album",
                            "name": that.info.albumDetail.albumName ? that.info.albumDetail.albumName : "",
                            "opertime": that.toFullTime(),
                            "channelid": responseData.albumDetail.channelId,
                            "sharetype": ""
                        }
                        shareUrlReport(behaviorData, actionType);
                    }


                    // 二次分享
                    window.initShareConfig = initShareConf(
                            that.info.shareTitle,
                            that.info.shareContent,
                            that.info.shareImg,
                            window.location.href,
                            {
                                uid: "",
                                username: "",
                                opertime: that.toFullTime(),
                                imei: "",
                                openid: "",
                                ip: "",
                                channelid: responseData.albumDetail.channelId,
                                contentid: that.$route.params.albumid,
                                name: that.info.albumDetail.albumName,
                                contenttype: "album",
                                type: "album_1",
                                tagid: "",
                                extendtag: "",
                                sharetype: "weixin",
                                shareurl: window.location.href
                            }
                    );

                 //   doVisit();
                    doAccessAlbumSpecial();
                    // console.log("--------------------------");
                    // console.log(JSON.stringify(this.info, undefined, 2));
                    // console.log("--------------------------");
                });
            },
        },
        beforeCreate: function () {
        },
        mounted: function () {
            let that = this;
            that.getAlbum();


        },
    }
</script>

<style>
    #album_container {
    }

    .album-list {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: -0.5rem;
        width: 100%;
    }

    .album-item {
        width: 49%;
        margin-top: -0.5rem;
        margin-bottom: -0.5rem;
        /*border-bottom: 0.06rem solid #EDEDED;*/
    }

    .album-item:nth-child(odd) {
        float: left;
        margin-right: 2%;
    }

    .album-item:nth-child(even) {
        float: right;
    }

    .list-video-component-item {
        border-bottom: 0 !important;
    }

    .list-video-component-title {
        height: auto;
    }

    .album-list-audio {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .album-nav{
        width: 100%;
        height: 1.4rem;
    }
    .album-nav-gx{
        height: 1.4rem;
        line-height: 1.4rem;
        font-size: 0.9rem;
        color: #666;
        display: block;
        float: left;
    }
    .album-nav-icon{
        height: 1.4rem;
        line-height: 1.4rem;
        float: right;
        font-size: 0.9rem;
        color: #666;
    }
    .album-nav-icon img{
        height: 1.1rem;
    /* line-height: 1.4rem; */
        vertical-align: middle;
    }
</style>